<template>
  <el-container v-loading="loading">

		<div class="seach_box">
			<div style="float: right;margin-right: 20px;">
				<el-date-picker
					v-model="value6"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd">
				</el-date-picker>
				<el-button type="primary" icon="el-icon-search" @click="seach_btn">搜索</el-button>
			</div>
		</div>

    <el-row>
      <div class="info-group-block">
        <h3>总交易额</h3>
        <p>{{total_price}}</p>
      </div>

      <div class="info-group-block">
        <h3>总交易数</h3>
        <p>{{count}}</p>
      </div>

      <div class="info-group-block">
        <h3>昨日交易额</h3>
        <p>{{last_price}}</p>
      </div>

      <div class="info-group-block">
        <h3>昨日交易数</h3>
        <p>{{last_count}}</p>
      </div>
    </el-row>

    <!--<el-row>
      <router-link to="/DataStatistics/PlatformOrderStatistic">
        <div class="info-group-block info-group-block-default">
          <h3>平台数据统计入口</h3>
        </div>
      </router-link>
      <router-link to="/DataStatistics/UserStatistic">
        <div class="info-group-block info-group-block-default">
          <h3>用户数据统计入口</h3>
        </div>
      </router-link>
      <router-link to="/DataStatistics/OrderStatistic">
        <div class="info-group-block info-group-block-default">
          <h3>订单数据统计入口</h3>
        </div>
      </router-link>
      <router-link to="/DataStatistics/ServicePersonalStatistic">
        <div class="info-group-block info-group-block-default">
          <h3>服务人员数据统计入口</h3>
        </div>
      </router-link>
    </el-row>-->

    <div class="chart-group">
      <div class="charts">
        <ve-line :data="baseChartData" ></ve-line>
      </div>
    </div>

  </el-container>

</template>

<script>
  export default {
    mounted: function () {
       this.getData();
    },
		methods:{
			getData:function(){
				console.log(this.times)
				let _this = this;
				let tempRows = [];
				this.api.getStatisticalData({time_area:this.times}).then(function (res) {
				  if (res.code == 1) {
				    let _statistical = res.data.statistical;
            console.log("营业额", _statistical);
				    _this.count = res.data.total.toatalnum;
				    _this.total_price = res.data.total.totalturnover;
				    _this.last_price = res.data.today.todayincome;
				    _this.last_count = res.data.today.todaynum;
				    let tempRows = [];
				    _statistical.forEach(function (item, index) {
				      tempRows.push({
				        '日期': item.period,
				        '营业额': item.totalpride,
				        '订单数': item.ordernum
				      });
				    });
				    _this.baseChartData.rows = tempRows.reverse();
				    _this.loading = false;
				  }
				}).catch(function (error) {
				  throw new Error(error);
				})
			},
			seach_btn:function(){
				if(!this.value6){
					this.$message({
					  showClose: false,
					  message: '时间不能为空',
					  type: 'warning',
						duration:1000
					});
					return false;
				}
				let time=this.value6[0] + '~'+this.value6[1];
				this.times = time ;
				this.getData();
			}
		},
    data() {
      return {
				times:'',
				value6:'',
        loading: true,  // 页面加载
        count: 0,                //类型：Number  必有字段  备注：平台下单数量
        total_price: 0,                //类型：Number  必有字段  备注：平台交易金额
        last_price: 0,                //类型：Number  必有字段  备注：昨天交易金额
        last_count: 0,                //类型：Number  必有字段  备注：昨天交易数量
        baseChartData: {
          columns: ['日期', '营业额', '订单数'],
          rows: [
            {'日期': '1/1', '营业额': 0, '订单数': 0},
          ]
        }
      }
    }
  }
</script>

<style scoped>
  .el-container {
    width: 100%;
    height: 800px !important;
    overflow: hidden;
    display: block;
  }

  .chart-group {
    width: 100%;
    margin: 50px 0;
    overflow: hidden;
    float: left;
  }

  .ve-line {
    width: 95% !important;
    height: 400px !important;
    margin: 0 auto;
  }

  .info-group-block {
    width: 23%;
    display: inline-block;
    margin: 15px 0 30px 1%;
    text-align: center;
    color: #ffffff;
    padding: 30px;
    border-radius: 3px;
  }

  .info-group-block h3, .info-group-block p {
    font-size: 18px;
    margin: 0;
    padding: 0;
  }

  .info-group-block p {
    margin-top: 10px;
  }

  .info-group-block:nth-child(1) {
    background: #F78068;
  }

  .info-group-block:nth-child(2) {
    background: #65AEDA;
  }

  .info-group-block:nth-child(3) {
    background: #60E69C;
  }

  .info-group-block:nth-child(4) {
    background: #F7B276;
  }

  .info-group-block-default {
    background: #909399 !important;
    align-items: center;
    color: #ffffff;
  }
	.seach_box{width: 100%;height: 50px;margin-top: 10px;}
</style>
